<template>
  <div>
    <!-- 条件筛选 start -->
    <el-form :model="formInline" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.page.partition')">
            <el-select
              v-model="formInline.partitionList"
              filterable
              multiple
              placeholder=""
              :disabled="isHandleCheck">
              <el-option
                v-for="item in partitionOptions"
                :key="item.partitionid"
                :label="item.partitionname"
                :value="item.partitionid">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item :label="this.$t('m.inventory.time')" class="date-picker">
            <el-date-picker
              v-model="formInline.collisionDate"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="-"
              start-placeholder=""
              end-placeholder=""
              :picker-options="pickerOptions"
              :default-time="['00:00:00', '23:59:59']"
              :disabled="isHandleCheck"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6" align="right">
          <el-button type="primary" @click="search" v-if="!isHandleCheck">{{$t('m.query')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 条件筛选 end -->

    <!-- table数据展示 start -->
    <el-row>
      <el-col :span="24">
        <el-table
          ref="collision-table"
          empty-text
          fit
          size="mini"
          :span-method="objectSpanMethod"
          :data="tableData">
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="locationcode" :label="$t('m.location.locationcode')" width="150"></el-table-column>
          <el-table-column align="center" prop="productspeccode" label="SKU" width="150"></el-table-column>
           <template v-if="getInventoryDetail().stockway===2">
            <el-table-column align="center" prop="productstocksum" :label="$t('m.inventory.productstocksum')"></el-table-column>
          </template>
          <el-table-column align="center" prop="productname" :label="$t('m.in.productname')"></el-table-column>
          <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')" width="200"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- table数据展示 end -->
  </div>
</template>
<script>
import common from '@/utils/common'
export default {
  name:'collision-table',
  data(){
    return {
      formInline:{
        partitionList:[], // 选中库区列表
        collisionDate:[] // 动碰时间段
      },
      partitionOptions:[], // 所有库区列表
      pickerOptions:{ // 限制日期范围在今天之前
        disabledDate(time){
          return time.getTime() > new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1 // 获取今天23：59：59的时间戳
        }
      },
      tableData:[]
    }
  },
  inject:{
    getInventoryDetail:{
      default:()=>{}
    }
  },
  async mounted(){
    await this.getPartition() // 优先获取所有库位信息
    // 动碰盘点--查看功能
    if(this.getInventoryDetail()){
      // this.$emit('isProhibited',true) // 查看状态下，保存按钮不可用
      let createdatestart = common.timestampToTime(this.getInventoryDetail().touchstartdate)
      let createdateend = common.timestampToTime(this.getInventoryDetail().touchenddate)
      this.formInline.collisionDate.push(...[createdatestart,createdateend])
      this.tableData = this.getInventoryDetail().stockTakeDetailOutputList

      // 反显选中库区
      for(let i=0;i<this.tableData.length;i++){
        if(!this.formInline.partitionList.includes(this.tableData[i].partitionid))
          this.formInline.partitionList.push(this.tableData[i].partitionid)
      }
    }
  },
  computed:{
    datetimerange(){
      let [createdatestart, createdateend] = this.formInline.collisionDate || Array.from(2)
      return {
        createdatestart, //动碰时间段--start
        createdateend //动碰时间段--end
      }
    },
    isHandleCheck(){
      return Boolean(this.getInventoryDetail())
    }
  },
  components:{

  },
  methods:{
    // 表格缩进
    objectSpanMethod({ rowIndex, columnIndex }){
      let MergeArr = [1,5]
      if (MergeArr.includes(columnIndex)){
        if(!this.getMergeRows.length){
          return {
            rowspan:1,
            colspan:1
          }
        } else {
          return {
            rowspan:this.getMergeRows[rowIndex],
            colspan:this.getMergeRows[rowIndex] ? 1 : 0
          }
        }
      }
    },
    // 获取库区
    async getPartition(){
      let warehouseId = this.$store.state.basicInfo.warehouseInfo.id
      let options = {
        method:'get',
        url:`/partition/list/${warehouseId}`
      }
      await this.$axios(options).then(({data})=>{
        // 處理下數據更直觀
        this.partitionOptions = data.list.reduce((prev,cur)=>{
          if(cur.state){
            let item = {
              partitioncode:cur.partitioncode,
              partitionid:cur.partitionid,
              partitionname:cur.partitionname
            }
            return prev.concat(item)
          } else { return prev }
        },[])
      })
    },
    // 根据选中的库区&&时间的信息，查询库存变动历史
    search(){
      if(!this.formInline.partitionList.length) return this.callbackMessage(this.$t('m.choose')+this.$t('m.page.partition'))

      let data = Object.assign({partitionids:this.formInline.partitionList},this.datetimerange)
      let options = {
        method:'post',
        url:`/stocktake/getlsinfosft`,
        data
      }
      this.$axios(options).then(({data})=>{
        this.tableData = data
        if(!data.length) this.callbackMessage(this.$t('m.inventory.noinfo'))
      })
    }
  },
  watch:{
    tableData:{
      handler(){
        let __index = 0
        let code = ''
        this.getMergeRows = []
        this.tableData.forEach((item,index)=>{
          if(!item.locationcode){
            this.getMergeRows.push(1)
          } else if(item.locationcode !== code){
            this.getMergeRows.push(1)
            code = item.locationcode
            __index = index
          } else {
            if(code){
              ++this.getMergeRows[__index]
              this.getMergeRows.push(0)
            }
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.date-picker ::v-deep .el-range-editor {
  width: 100%;
}
</style>